<!-- 财务管理  供应商对账 -->
<template>
<view style="height: 100vh;">
<layout index="/pages/scm/index/index">
  <view class="app-container">
    <!-- 搜索表单 -->
    <view class="search-form">
      <van-cell-group inset>
        <van-field
          v-model="queryParams.contractYear"
          label="年份"
          readonly
          clickable
          placeholder="选择年份"
          @click="showYearPicker = true"
        />
        <van-popup v-model:show="showYearPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="yearOptions"
            @confirm="onYearConfirm"
            @cancel="showYearPicker = false"
          />
        </van-popup>
        <van-field
          v-model="selectedSupplierLabel"
          label="供应商"
          readonly
          clickable
          placeholder="请选择供应商"
          @click="showSupplierPicker = true"
        />
        <van-popup v-model:show="showSupplierPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="supplierIdOptions"
            value-key="dictLabel"
            @confirm="onSupplierConfirm"
            @cancel="showSupplierPicker = false"
          />
        </van-popup>
      </van-cell-group>
      <view class="button-group">
        <van-button type="primary" block @click="handleQuery">搜索</van-button>
        <van-button plain block @click="resetQuery">重置</van-button>
      </view>
    </view>
    <!-- 标签页 -->
    <van-tabs v-model:active="activeName" color="#00a870" title-active-color="#00a870" sticky>
      <van-tab title="季度统计" name="first">
        <van-empty v-if="quarterList.length === 0" description="暂无数据" />
        <van-cell-group v-else inset>
          <van-cell v-for="(item, index) in quarterList" :key="index">
            <view class="list-item">
              <text class="label">季度：</text>
              <text class="value">{{ item.contractQuarter }}</text>
              <text class="label">供应商名称：</text>
              <text class="value">{{ item.supplierName }}</text>
              <text class="label">应付金额：</text>
              <text class="value">{{ item.contractAmount }}元</text>
            </view>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="月份统计" name="second">
        <van-empty v-if="monthList.length === 0" description="暂无数据" />
        <van-cell-group v-else inset>
          <van-cell v-for="(item, index) in monthList" :key="index">
            <view class="list-item">
              <text class="label">月份：</text>
              <text class="value">{{ item.contractMonth }}</text>
              <text class="label">供应商名称：</text>
              <text class="value">{{ item.supplierName }}</text>
              <text class="label">应付金额：</text>
              <text class="value">{{ item.contractAmount }}元</text>
            </view>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </view>
</layout>
</view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 数据定义
const activeName = ref("first");
const showYearPicker = ref(false);
const showSupplierPicker = ref(false);
const queryParams = ref({
  contractYear: "",
  supplierId: "",
});
const selectedSupplierLabel = ref("");
const yearOptions = Array.from({ length: 10 }, (_, i) => (new Date().getFullYear() - i).toString());
const supplierIdOptions = [
  { dictValue: "1", dictLabel: "供应商A" },
  { dictValue: "2", dictLabel: "供应商B" },
  { dictValue: "3", dictLabel: "供应商C" },
  { dictValue: "4", dictLabel: "供应商D" },
  { dictValue: "5", dictLabel: "供应商E" },
];
const monthList = ref([]);
const quarterList = ref([]);

// 初始化
onMounted(() => {
  queryParams.value.contractYear = yearOptions[0];
  handleQuery(); // 页面加载时自动加载数据
});

// 方法定义
const onYearConfirm = (value) => {
  queryParams.value.contractYear = value;
  showYearPicker.value = false;
};

const onSupplierConfirm = (value) => {
  queryParams.value.supplierId = value.dictValue;
  selectedSupplierLabel.value = value.dictLabel;
  showSupplierPicker.value = false;
};

const handleQuery = () => {
  setTimeout(() => {
    monthList.value = mockMonthData();
    quarterList.value = mockQuarterData();
  }, 500);
};

const resetQuery = () => {
  queryParams.value.contractYear = yearOptions[0];
  queryParams.value.supplierId = "";
  selectedSupplierLabel.value = "";
  handleQuery();
};

// 模拟接口数据生成
const mockMonthData = () => {
  const suppliers = ["供应商A", "供应商B", "供应商C", "供应商D", "供应商E"];
  const months = [
    "2023-01", "2023-02", "2023-03", "2023-04", "2023-05", "2023-06",
    "2023-07", "2023-08", "2023-09", "2023-10", "2023-11", "2023-12"
  ];
  const data = [];

  for (let i = 0; i < months.length; i++) {
    const supplier = suppliers[Math.floor(Math.random() * suppliers.length)];
    const contractAmount = Math.floor(Math.random() * 10000) + 1000; // 随机金额在1000到10000之间
    data.push({
      contractMonth: months[i],
      supplierName: supplier,
      contractAmount: contractAmount.toString(),
    });
  }

  return data;
};

const mockQuarterData = () => {
  const suppliers = ["供应商A", "供应商B", "供应商C", "供应商D", "供应商E"];
  const quarters = ["2023-Q1", "2023-Q2", "2023-Q3", "2023-Q4"];
  const data = [];

  for (let i = 0; i < quarters.length; i++) {
    const supplier = suppliers[Math.floor(Math.random() * suppliers.length)];
    const contractAmount = Math.floor(Math.random() * 30000) + 5000; // 随机金额在5000到30000之间
    data.push({
      contractQuarter: quarters[i],
      supplierName: supplier,
      contractAmount: contractAmount.toString(),
    });
  }

  return data;
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.search-form {
  margin-bottom: 20px;
}
.button-group {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.list-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: #333;
}
.label {
  color: #666;
  font-weight: bold;
}
.value {
  color: #00a870;
  font-weight: normal;
}
</style>